<template>
	<view class="my-page">
		<view class="title">恩平市那吉镇急事“吉”办系统诉求单</view>
		<u-line></u-line>
		<view class="content">
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u-form labelPosition="left" :model="model1" ref="form1">
				<u-form-item label="诉求类型" prop="type" labelWidth="70">
					<u-input placeholder="" v-model="model1.type" disabled>
					</u-input>
				</u-form-item>

				<u-form-item label="详细项目" prop="project" labelWidth="70">
					<u-input v-model="model1.project" disabled></u-input>
				</u-form-item>

				<u-form-item label="诉求描述" prop="intro" labelWidth="70">
					<u-textarea v-model="model1.intro" disabled count></u-textarea>
				</u-form-item>

				<u-form-item label="诉求地址" prop="address" labelWidth="70">
					<u-input placeholder="点击选择地址" v-model="model1.address" disabled></u-input>
				</u-form-item>

				<u-form-item label="凭证上传" labelWidth="70">
					<view v-if="model1.images && model1.images.length > 0">
							<u-album multipleSize="85" singleSize="85" :urls="model1.images" keyName="external_url"></u-album>
				
					</view>

				</u-form-item>

				<u-form-item label="是否保密" prop="secrecy" labelWidth="70">
					<u-radio-group v-model="model1.secrecy" disabled>
						<u-radio :customStyle="{marginRight: '16px'}" v-for="(item, index) in secrecyRadiovalue"
							:key="index" :label="item.name" :name="item.name">
						</u-radio>
					</u-radio-group>
				</u-form-item>

				<u-form-item label="姓名" prop="name" labelWidth="70">
					<u-input v-model="model1.name" disabled placeholder="请输联系人姓名">
					</u-input>
				</u-form-item>

				<u-form-item label="手机号码" prop="phone" labelWidth="70">
					<u-input v-model="model1.phone" disabled placeholder="请输入联系人电话">
					</u-input>
				</u-form-item>

				<u-form-item label="详细地址" prop="detail" labelWidth="70">
					<u-input v-model="model1.detail_address" disabled placeholder="请输入详细地址"></u-input>
				</u-form-item>

			</u-form>
		</view>

		<view>
			<u-row>
				<u-col span="6" customStyle="margin-right: 8rpx;">
					<u-button type="primary" text="修改" @click="edit"></u-button>
				</u-col>
				<u-col span="6">
					<u-button type="primary" text="终止" @click="handleCancle"></u-button>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	import * as Api from '@/api/appointment.js'
	export default {
		data() {
			return {
				id: null,
				model1: {
					type: '',
					name: '',
					address: '',
					phone: '',
					secrecy: '',
					intro: '',
					project: '',
					detail_address: ''
				},
				secrecyRadiovalue: [{
						name: '是',
						disabled: false
					},
					{
						name: '否',
						disabled: false
					},
				],
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option.id); //打印出上个页面传递的参数。
			this.id = option.id
			this.getDetail(option.id)
		},

		methods: {
			// 获取诉求详情
			getDetail(appointmentId) {
				Api.detail({
					params: {
						appointmentId
					}
				}).then(res => {
					console.log(res)
					this.model1 = res.detail
				}).catch(err => {
					uni.showModal({
						title: '请重新进入',
						showCancel: false,
						success: res => {
							if (res.confirm) {
								uni.redirectTo({
									url: '/pages/index/index'
								})
							}
						}
					})
				})
			},

			edit() {
				uni.navigateTo({
					url: '/pages/edit/edit?id=' + this.id
				})
			},
			// 取消预约
			handleCancle() {
				uni.showModal({
				    title: '终止诉求',
					content: '确定要终止诉求吗？',
				    success: res => {
				        if (res.confirm) {
				            Api.cancel({
				            	params: {
				            		appointmentId: this.model1.appointment_id
				            	}
				            }).then(res => {
				            	// 取消成功，返回首页
				            	uni.showModal({
				            	    title: '终止成功',
				            		showCancel: false,
				            	    success: res => {
				            	        if (res.confirm) {
				            	            uni.redirectTo({
				            	            	url: '/pages/index/index'
				            	            })
				            	        }
				            	    }
				            	});
				            	
				            }).catch(err => {
								uni.showModal({
								    title: err.message,
									showCancel: false,
								    success: res => {
								        if (res.confirm) {
								            uni.redirectTo({
								            	url: '/pages/index/index'
								            })
								        }
								    }
								});
							})
				        }
				    }
				})
			},
			onShareAppMessage() {
				return {
				  title: "恩平市那吉镇吉事吉办",
				  path: `/pages/index/index`
				 }
			},
			onShareTimeline(){
				return {
				  title: "恩平市那吉镇吉事吉办",
				  path: `/pages/index/index`
				 }
			}
		},
	}
</script>

<style scoped lang="scss">
	.my-page {
		margin: 0 20rpx;
		padding-top: 50rpx;
		padding-bottom: 50rpx;

		.title {
			padding: 25rpx 0;
			font-size: 40rpx;
			text-align: center;
		}

		.image-list {
			display: flex;
			flex-flow: wrap;
			// justify-content: space-between;

			.item {
				margin: 10rpx;
			}
		}
	}
</style>
